<template>
    <!-- 歌曲单 -->
    <div id="songSheet">
        <!-- 歌单介绍 -->
        <div class="detail_list" v-if="issong">
            <!-- <header id="toolbar">
                <ul class="clearfix">
                    <li @click="back" ><van-icon name="arrow-left" /></li>
                    <li class="centersong">歌单</li>
                    <li class="more_play"> 
                        <span class="more_white"></span>
                        <span class="in_play"></span>
                    </li>
                </ul>
            </header> -->
            <HeaderMusic></HeaderMusic>
            <!-- 虚幻背景 -->
            <!-- 正常就使用vuex数据 -->
            <div class="detail_list_bg" :style="{'background-image':'url(' + songSheetList.coverImgUrl+'?param=150y150'+ ')'}" v-if='songSheetList.coverImgUrl'></div>
            <div class="detail_list_filter"></div>

            <!--主内容 -->
            <div class="main">
                <!-- 歌单介绍 -->
                <div class="iconDetail clearfix">
                    <!-- 歌单大图 -->
                    <div class="icon_left">
                        <img :src="songSheetList.coverImgUrl" alt="" @click="showPopupImg">
                        <span>{{songSheetList.playCount.toString().length>4?Math.round(songSheetList.playCount/10000)+'万':Math.round(songSheetList.playCount)}}</span>
                    
                        <van-popup v-model="showImg">
                            <!-- 虚幻背景 -->
                            <div class="detail_list_bg2" :style="{'background-image':'url(' + songSheetList.coverImgUrl+'?param=400y400'+ ')'}" v-if='songSheetList.coverImgUrl'></div>
                            <div class="detail_list_filter2"></div>
                            <!-- 弹窗内容 -->
                            <div class="alertMain">
                                <!-- 头部关闭按钮 -->
                                <div class="clear">
                                    <van-icon name="cross" @click="close" />   
                                </div>
                                <!-- 大图 以及歌单标题 -->
                                <div class="songTopTitle">
                                    <img :src="songSheetList.coverImgUrl" alt="">
                                    <p>{{songSheetList.name}}</p>
                                </div>
                                <!-- 歌单描述 -->
                                <div class="songSheetDescribe">
                                    <ul class="songSheetTitle clearfix">
                                        <li>标签：</li>
                                        <li v-for="(item,index) in songSheetList.tags" :key="index">{{item}}</li>
                                    </ul>
                                    <p class="description">
                                        {{songSheetList.description}}
                                    </p>
                                </div>
                            </div>
                        </van-popup>
                    </div>
                    <div class="icon_right">
                        <!-- 歌单名 -->
                        <h2>{{songSheetList.name}}</h2>
                        <!-- 作者 -->
                        <div class="user" @click="getUser(songSheetList)">
                            <img :src="songSheetList.creator.avatarUrl" alt="">
                            <span>{{songSheetList.creator.nickname}}</span>
                            <van-icon name="arrow" />
                        </div>
                        <!-- 歌单详细介绍 -->
                        <div class="memory"  @click="showPopupImg">
                            <!-- 限定展示15个字符 -->
                            <span v-if="songSheetList.description">{{songSheetList.description.substring(0,15)}}</span>
                            <van-icon name="arrow" />
                            <!-- 字数超过15个显示省略号 -->
                            <div v-if="songSheetList.description">{{songSheetList.description.length>15?'...':''}}</div>
                        </div>
                    </div>
                </div>
                <!-- 评论之类的东西 -->
                <div class="comment">
                     <!-- 评论 分享  下载 多选 -->
                    <ul class="clearfix">
                        <li @click="comment">
                            <i class="dialogue"></i>
                            <p>{{songSheetList.commentCount}}</p>
                        </li>
                        <li>  
                            <!-- 分享按钮 -->
                            <van-button type="primary" @click="showPopup">                
                                <i class="share"></i>
                                <p>{{songSheetList.shareCount}}</p>
                            </van-button>
                            <!-- 弹窗内容 -->
                            <van-popup v-model="show"   position="bottom" :style="{ height: '35%' }">
                                <div class="ShareTo">
                                    <h4>分享至</h4>
                                    <ul class="clearfix">
                                        <li class="music">
                                            <div class="Details">
                                                <span></span>    
                                            </div>
                                            <p class="name">云音乐动态</p>
                                        </li>
                                        <li class="message">
                                            <div class="Details">
                                                <span></span>    
                                            </div>
                                            <p class="name">私信</p>
                                        </li>    
                                    </ul>   
                                </div>
                                <div class="toClass">
                                    <ul class="clearfix">
                                        <li class="weachtFriend">
                                             <div class="Details">
                                                <span></span>    
                                            </div>
                                            <p class="name">微信朋友圈</p>
                                        </li>
                                        <li class="wechat">
                                            <div class="Details">
                                                <span></span>    
                                            </div>
                                            <p class="name">微信</p>
                                        </li>
                                        <li class="qqZone">
                                            <div class="Details">
                                                <span></span>    
                                            </div>
                                            <p class="name">QQ空间</p>
                                        </li>
                                        <li class="qq">
                                            <div class="Details">
                                                <span></span>    
                                            </div>
                                            <p class="name">QQ好友</p>
                                        </li>
                                        <li class="sina">
                                            <div class="Details">
                                                <span></span>    
                                            </div>
                                            <p class="name">微博</p>
                                        </li>
                                        <li  class="link">
                                            <div class="Details">
                                                <span></span>    
                                            </div>
                                            <p class="name">复制链接</p>
                                        </li>
                                    </ul>
                                </div>
                            </van-popup>

                        </li>
                        <li @click="Download">
                            <i class="download"></i>
                            <p>下载</p>
                        </li>
                        <li @click="selections">
                            <i class="multiple_selection"></i>
                            <p>多选</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 歌曲列表 -->
        <div class="songSheetList" v-if="issong">
            <ul>
                <!-- 开通会员提示 -->
                <li class="member">
                    <div>
                        <div class="indexes">
                        <span></span>
                        </div>
                        <div class="sgchfl">
                            <div class="sgchfl_name">会员享高品质听觉盛宴</div>
                        </div>
                        <div class="sgchfr">
                            <span class="collection">首开VIP仅5元 <van-icon name="arrow" /> </span>
                        </div>
                    </div>
                </li>
                <!-- 播放全部 -->
                <li class="play_all">
                    <div class="indexes">
                        <span></span>
                    </div>
                    <div class="sgchfl">
                        <div class="sgchfl_name">播放全部 <span style="color:#888;">(共{{songSheetList.tracks.length}}首)</span> </div>
                    </div>
                    <div class="sgchfr">
                        <span class="collection">+收藏({{songSheetList.subscribedCount}})</span>
                    </div>
                </li>
                <!-- 歌曲列表 -->
                <li class="clearfix" v-for="(item,index) in songSheetList.tracks" :key="index" @click="playMusic(item)">
                    <div class="indexes">{{index+1}}</div>
                    <div class="sgchfl">
                        <div class="sgchfl_name song_name">{{item.name}}</div>
                        <div class="arists">{{item.album.artists[0].name}} - {{item.album.name}}</div>
                    </div>
                    <div class="sgchfr">
                        <span class="sgchply"></span>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 底部导航 -->
        <Tabbar></Tabbar>
        <!-- loading加载 -->
        <Loading v-if="isLoging" ></Loading>
    </div>
</template>
<script>
import {mapGetters,mapState,mapMutations,mapActions} from "vuex";
import { ActionSheet, Dialog } from 'vant';
import { Toast } from 'vant';
import Loading from '@/components/Loading.vue'
import HeaderMusic from '@/components/HeaderMusic.vue'
import Tabbar from '@/components/Tabbar.vue'
export default {
    data () {
        return {
            issong:false,//控制内容
            isLoging:true,//加载loading
            songSheetList:[],//歌单数据 
            songSheets:{//歌单详情 
                coverImgUrl:null,//歌单背景图
                id:null,
                name:null,//歌单名
                nickname:null,//用户名
                userId:null,//用户id
                count:0
            },
            show: false,
            showImg:false,
            isAplayer:null,//控制播放器
        }
    },
    components: {
      Loading,HeaderMusic,Tabbar
    },
    computed: {
        ...mapState(["musicDetail","songSheet"])
    },
    created () {
        //刷新时或初始化时执行
        this.getSongList();
    },
    watch: {
        // 监听不同的歌单id
        'musicDetail.songId':{
            handler: function (newVal,oldVal){
                if(newVal !== oldVal){
                    this.getSongListVuex();    
                }
            }
        },
    },
    methods: {
        //返回上一层
        // back(){
        //     this.$router.go(-1);//返回上一层
        // },
        //请求数据
        getSongListVuex(){
            // 换歌单的时候 重新判断下
            this.isLoging = true;
            this.issong = false;
            // 进入不同歌单时触发
            const id = this.musicDetail.songId?this.musicDetail.songId:JSON.parse(sessionStorage.getItem("musicDetail")).id;
            const params = {
                id:id,
            }
            this.axios.get('/music/playlist/detail',{params:params}).then(res=>{
                this.songSheetList = res.data.result;
                // sessionStorage.setItem('songSheetLists',JSON.stringify(this.songSheetList));
                //请求数据显示内容
            
                res.data.result.tracks.forEach(item =>{
                    const url = 'https://music.163.com/song/media/outer/url?id='+item.id+'.mp3 ';
                    this.musicDetail.list.push({
                        id:item.id,
                        img:item.album.blurPicUrl,
                        title:item.name,
                        author:item.artists[0].name,
                        url:url,
                        lrc:null,
                    })
                })
                this.$store.commit('getMusicDetail', this.musicDetail);
                // 数据加载完加载Loading 
                setTimeout(()=>{
                        this.isLoging = false;
                        this.issong = true;
                },1000)
            })
            
            
        },
        //刷新 和初始化时 执行
        getSongList(){
            const id = this.musicDetail.songId?this.musicDetail.songId:JSON.parse(sessionStorage.getItem("songSheetLists")).id;
            const params = {
                id:id,
            }
            this.axios.get('/music/playlist/detail',{params:params}).then(res=>{
                this.songSheetList = res.data.result;
                sessionStorage.setItem('songSheetLists',JSON.stringify(this.songSheetList));
                res.data.result.tracks.forEach(item =>{
                    const url = 'https://music.163.com/song/media/outer/url?id='+item.id+'.mp3 ';
                    this.musicDetail.list.push({
                        id:item.id,
                        img:item.album.blurPicUrl,
                        title:item.name,
                        author:item.artists[0].name,
                        url:url,
                        lrc:null,
                    })
                })
                //console.log('vuex',this.musicDetail)
                this.$store.commit('getMusicDetail', this.musicDetail);
                setTimeout(()=>{
                    this.isLoging = false;
                    this.issong = true;
                },1000)
            })

        },
         //将当前要播放的音乐name传入到vuex中
        playMusic (item){
            const url = 'https://music.163.com/song/media/outer/url?id='+item.id+'.mp3 '   
            //当前播放列表
            this.musicDetail.id = item.id;
            this.musicDetail.img = item.album.blurPicUrl;
            this.musicDetail.title = item.name;
            this.musicDetail.author = item.artists[0].name;
            this.musicDetail.url = url;
            this.$store.commit('getMusicDetail', this.musicDetail);
            //控制显示播放器
            this.isAplayer = true;
            this.$store.commit('getAplayer',this.isAplayer)
        },
        //评论
        comment(){
            this.songSheets = {
                coverImgUrl:this.songSheetList.coverImgUrl,//歌单背景图
                id:this.songSheetList.id,
                name:this.songSheetList.name,//歌单名
                nickname:this.songSheetList.creator.nickname,//用户名
                userId:this.songSheetList.userId,
                count:this.songSheets.count+1,
            }
            this.$store.commit('getSongSheet', this.songSheets);
            this.$router.push('/comment')

        },
        //分享
        showPopup() {
            this.show = true;
        },
        //下载
        Download(){
            Dialog.confirm({
                message:'确定下载歌单中的全部音乐?'
            }).then(() =>{
                setTimeout(function(){
                    Dialog.alert({
                        message:'下载完成！'
                    })
                },500)
            })
        },
        //多选
        selections(){
            Dialog.alert({
                message:'这个功能没啥用'
            })
        },
        //展示当前封面信息
        showPopupImg() {
            $('header').hide();
            this.showImg = true;
            //当屏幕分辨率为偶数时 字体不会模糊
            var clientWidth = Math.round(document.body.clientWidth/2)*2 //当前屏幕宽度
            setTimeout(function(){
                $('.icon_left .van-popup').width(clientWidth);
                // $('.icon_left .van-popup').show();
                //去掉空格
                $('.description').text($('.description').text().trim());
                $('.description').show();
            },300)
        },
        // 关闭弹窗
        close(){
            $('header').show();
           this.showImg = false; 
        },
        //用户信息跳转
        getUser(item){
            this.songSheets.userId = item.userId;
            this.$store.commit('getSongSheet', this.songSheets);
            this.$router.push('/userDetail');
        }
    },
     mounted(){
         //滚动事件  滚动改变导航栏颜色
        var toolbar=document.getElementById("toolbar") 
        window.addEventListener('scroll',()=>{
            this.offsetTop=window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
            if (this.offsetTop>250) {
            $('#toolbar').css({'background':'#000'});
            }else{
                $('#toolbar').css({'background':'transparent'});
            }
        },true);
  }
}
</script>
<style lang='less'>
    #songSheet{
        .van-loading{
            text-align: center;
            z-index: 10;
            margin-top: 50px;
        }
        .van-button--primary{
            background-color: transparent;
            line-height: 1;
            border: 0;
        }
       
        .detail_list{
            height: 250px;
            width: 100%;
            position: relative;
            z-index: 2;
            // header{
            //     height: 50px;
            //     line-height: 50px;
            //     color: #fff;
            //     position: fixed;
            //     width: 100%;
            //     z-index: 4;
            //     top: 0;
            //     ul{
            //         li{
            //             width: 33.3% ;
            //             color: #fff;
            //             float: left;
            //             .van-icon{
            //                 margin-left: 10px;
            //                 font-size: 20px;
            //                 vertical-align: middle;
            //             }
            //         }
            //         .centersong{
            //             text-align: center;
            //         }
            //         .more_play{
            //             text-align: right;
            //             span{
            //                 display: inline-block;
            //                 width: 18px;
            //                 height: 18px;
            //                 background-position: 0;
            //                 background-repeat: no-repeat;
            //                 background-size: 18px 18px;
            //                 vertical-align: middle;
            //                 margin-right: 20px;
            //             }
            //             .more_white{
            //                 background-image: url('../images/wyy/more_white.svg');
            //             }
            //             .in_play{
            //                 background-image: url('../images/wyy/in_play.svg');
            //             }
            //         }
            //     }
                
            // }
            .detail_list_bg{
                width: 100%;
                height: 90%;
                background: 0 40%;
                -webkit-filter: blur(20px);
                filter: blur(20px);
                background-size: cover;
                position: absolute;
                left: 0;
                top: 0;
            }
            .detail_list_filter{
                width: 100%;
                height: 100%;
                background-color: #40454d;
                opacity: 0.55;
                position: absolute;
                left: 0;
                top: 0;
                z-index: 1;
            }
            .main{
                padding-top: 60px;
                position: relative;
                z-index: 2;
                color: #fff;
                .iconDetail{
                    display: flex;
                    .icon_left{
                        float: left;
                        padding-left: 15px;
                        position: relative;
                        img{
                            width: 120px;
                            height: 120px;
                            border-radius: 8px;
                            box-shadow: 1px 1px 4px #888888;
                        }
                        span{
                            position: absolute;
                            top: 3px;
                            right: 3px;
                            font-size: 10px;
                            background-image: url('../images/erji.svg');
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 11px 10px;
                            text-shadow: 1px 0 0 rgba(0, 0, 0, 0.15);
                            padding-left: 12px;
                        }
                        .van-popup{
                            // display: none;
                            width: 100%;
                            height: 100%;
                            .detail_list_bg2 {
                                width: 100%;
                                height: 100%;
                                background: 0 40%;
                                -webkit-filter: blur(10px);
                                filter: blur(10px);
                                background-size: cover;
                                position: absolute;
                                left: 0;
                                top: 0;
                            }
                            .detail_list_filter2 {
                                width: 100%;
                                height: 200%;
                                background-color: #40454d;
                                opacity: 0.55;
                                position: absolute;
                                left: 0;
                                top: 0;
                                z-index: 1;
                            }
                            .alertMain{
                                position: relative;
                                z-index: 999;
                                .clear{
                                    text-align: right;
                                    i{
                                        font-size: 30px;
                                        margin: 10px;
                                    }
                                }
                                .songTopTitle{
                                    width: 100%;
                                    text-align: center;
                                    p{
                                        margin: 5px 15px;
                                        padding-bottom: 15px;
                                        border-bottom: solid 1px #ccc;
                                    }
                                }
                            }
                            .songSheetDescribe{
                                margin-top: 30px;
                                .songSheetTitle{
                                    li{
                                        float:left;
                                        margin-left: 10px;
                                        background-color: #545452;
                                        padding: 2px 8px;
                                        border-radius:15px; 
                                    }
                                    li:nth-of-type(1){
                                        background-color:transparent; 
                                    }
                                    li:nth-of-type(2){
                                        margin-left: 0;
                                    }
                                }
                                .description{
                                    display: none;
                                    margin-top: 20px;
                                    padding: 0 15px;
                                    white-space: pre-wrap;
                                }
                                
                            }
                            
                        }
                        .van-overlay{
                            background-color: transparent;
                        }
                    }
                    .icon_right{
                        float: left;
                        padding:0 15px;
                        flex: 1;
                        .user{
                            margin-top: 10px;
                            img{
                                width: 20px;
                                height: 20px;
                                border-radius: 50%; 
                                vertical-align: middle;
                                margin-right: 8px;
                            }
                            span{
                                vertical-align: middle;
                            }
                            .van-icon{
                                margin-left: 2px;
                                vertical-align: middle;
                            }
                        }
                        .memory{
                            margin-top: 10px;
                            span{
                                display: inline-block;
                                font-size: 10px;
                            }
                            .van-icon {
                                margin-left: 5px;
                                vertical-align: middle;
                            }
                            
                        }
                    }
                }
                .comment{
                    margin-top: 10px;
                    padding-left: 15px;
                     .van-popup--bottom {
                        border-top-left-radius: 15px;
                        border-top-right-radius: 15px;
                        text-align: left;
                        .ShareTo{
                            padding:15px;
                            color: #5C5C5C;
                            border-bottom: solid 1px #f3f3f3;
                            ul{
                                margin-top: 10px;
                                li{
                                    float: left;
                                    text-align: center;
                                    width: 20%;
                                }
                                .music{
                                    .Details{
                                        width: 45px;
                                        height: 45px;
                                        line-height: 45px;
                                        border-radius: 50%;
                                        background-color: #F7F7F7;
                                        margin: 0 auto;
                                        span{
                                            display: inline-block;
                                            width: 35px;
                                            height: 35px;
                                            background-image: url('../images/wyy/music.svg');
                                            background-position: 50% 100%;
                                            background-repeat: no-repeat;
                                            background-size: 25px 25px;
                                        }
                                    }
                                    .name{
                                        margin-top: 5px;
                                    } 
                                }
                                .message{
                                    .Details{
                                        width: 45px;
                                        height: 45px;
                                        line-height: 45px;
                                        border-radius: 50%;
                                        background-color: #F7F7F7;
                                        margin: 0 auto;
                                        span{
                                            display: inline-block;
                                            width: 35px;
                                            height: 35px;
                                            background-image: url('../images/wyy/message.svg');
                                            background-position: 50% 100%;
                                            background-repeat: no-repeat;
                                            background-size: 25px 25px;
                                        }
                                    }
                                    .name{
                                        margin-top: 5px;
                                    } 
                                }
                            }
                        }
                        .toClass{
                            padding:15px;
                            color: #5C5C5C;
                            ul::-webkit-scrollbar {
                                display: none;
                            }
                            ul{ 
                                overflow-y: hidden;
                                overflow-x: auto;
                                white-space: nowrap;
                                height: 70px;
                                display: flex;
                                li{
                                    margin-left:22px; 
                                    float: left;
                                    text-align: center;
                                    width: 20%;
                                    .Details{
                                        width: 45px;
                                        height: 45px;
                                        line-height: 45px;
                                        border-radius: 50%;
                                        background-color: #F7F7F7;
                                        margin: 0 auto;
                                        span{
                                            display: inline-block;
                                            width: 35px;
                                            height: 35px;
                                            background-position: 50% 100%;
                                            background-repeat: no-repeat;
                                            background-size: 25px 25px;
                                        }
                                    }
                                    .name{
                                        margin-top: 5px;
                                    } 
                                }
                                .weachtFriend{
                                    margin-left: 0;
                                    .Details{
                                        span{
                                            background-image: url('../images/wyy/wechatFriends.svg');
                                        }
                                    }
                                   
                                }
                                .wechat{
                                    .Details{
                                        span{
                                            background-image: url('../images/wyy/wechat.svg');
                                        }
                                    }
                                }
                                .qqZone{
                                    .Details{
                                        span{
                                            background-image: url('../images/wyy/qqzone.svg');
                                        }
                                    }
                                }
                                .qq{
                                    .Details{
                                        span{
                                            background-image: url('../images/wyy/qq.svg');
                                        }
                                    }
                                }
                                .sina{
                                    .Details{
                                        span{
                                            background-image: url('../images/wyy/sina.svg');
                                        }
                                    }
                                }
                                .link{
                                    .Details{
                                        span{
                                            background-image: url('../images/wyy/link.svg');
                                        }
                                    }
                                }
                            }
                        }
                    }
                    ul{
                        li{
                            float: left;
                            width: 25%;
                            text-align: center;
                            i{
                                display: inline-block;
                                width: 18px;
                                height: 18px;
                                background-position: 0;
                                background-repeat: no-repeat;
                                background-size: 18px 18px;
                            }
                            .dialogue{
                                background-image: url('../images/wyy/dialogue.svg');
                            }
                            .share{
                                background-image: url('../images/wyy/share.svg');
                            }
                            .download{
                                background-image: url('../images/wyy/download.svg');
                            }
                            .multiple_selection{
                                background-image: url('../images/wyy/multiple_selection.svg');
                            }

                            p{
                               height: 20px;
                               line-height: 20px;
                               font-size: 12px;
                            }
                        }
                    }
                }
            }

        }
        .songSheetList{
            ul{
                li{
                    height: 40px;
                    position: relative;
                    margin: 5px 0;
                    .indexes{
                        float: left;
                        width: 10%;
                        height: 100%;
                        line-height: 40px;
                        text-align: center;
                        color: #888888;
                    }
                    .sgchfl{
                        float: left;
                        width: 75%;
                        .arists{
                            font-size: 10px;
                            color: #888;
                        }
                        .song_name{
                            font-size: 16px;
                        }
                    }
                    .sgchfr{
                        float: right;
                        width: 15%;
                        text-align: center;
                        height: 100%;
                        line-height: 40px;
                        .sgchply{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 18px 18px;
                            background-image: url('../images/wyy/more.svg');
                        }
                    }
                }
                .play_all{
                    margin: 0;
                    .indexes{
                        span{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 18px 18px;
                            background-image: url('../images/wyy/play.svg');
                            vertical-align: middle;
                        }
                    }  
                    .sgchfl{
                        height: 100%;
                        line-height: 40px;
                        width: 60%;
                    }
                    .sgchfr{
                        width: 30%;
                        .collection{
                            font-size: 10px;
                            padding: 7px 7px;
                            background-color: #33383B;
                            color: #fff;
                            border-radius: 20px;
                        }
                    }
                }
                .member{
                    margin: 0;
                    border-bottom: solid 1px #f3f3f3;
                    border-top-right-radius: 10px;
                    .indexes{
                        span{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            background-position: 0;
                            background-repeat: no-repeat;
                            background-size: 18px 18px;
                            background-image: url('../images/wyy/icon.svg');
                            vertical-align: middle;
                        }
                    }  
                    .sgchfl{
                        height: 100%;
                        line-height: 40px;
                        width: 60%;
                    }
                    .sgchfr{
                        width: 30%;
                        .collection{
                            font-size: 10px;
                            color: #888;
                            .van-icon{
                                vertical-align: text-top;
                                font-size: 14px;
                            }
                        }
                    } 
                }
            }
        }
    }
    #aplayer .aplayer.aplayer-fixed .aplayer-body{
        bottom: 0;
    }
    #aplayer .aplayer{
        bottom: 0;
    }

</style>

